<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../styles/pages/register/register.css" type="text/css">
    <link rel="stylesheet" href="../../styles/common/base.css" type="text/css">
    <link rel="stylesheet" href="../../styles/common/header+footer.css" type="text/css">
</head>
<body>
    <!-- 头部 -->
    <div class="header-box">
            <div class="header">
                <div class="header-nav">
                    <a class="header-logo" href="../home/home.html">
                        <img src="../imgs/21cake-develop/logo.png" alt="logo">
                    </a>
                    <ul class="nav-box">
                        <li><a href="../home/home.html">首页</a></li>
                        <li><a href="../productList/productList.html">蛋糕</a></li>
                        <li><a href="#">面包</a></li>
                        <li><a href="#">冰淇淋</a></li>
                        <li><a href="#">咖啡下午茶</a></li>
                        <li><a href="#">咖啡全国送</a></li>
                        <li><a href="#">企业专区</a></li>
                    </ul>
                    <div class="right-city-user">
                        <a href="" class="header-app" id="APP" data-id="messageList">APP下载</a>
                        <div class="current-city" data-id="current-city"><a>上海</a><i></i></div>
                        <a class="header-message" data-id="messageList"
                            href="//static.21cake.com//message/center.html">消息</a>
                        <span class="not-login" style="display : none"><a href="../login/login.html">登录</a>/
                            <a href="../register/register.html">注册</a>
                        </span>
                        <span class="logined">
                            <a href="" class="header-user" data-id="header-user" style="display: inline;">
                                <img src="../imgs/21cake-develop/user-img.png">
                            </a>
                        </span>
                        <a href="../cart/cart.html" class="header-cart" id="cart-count-icon">
                            <i></i>
                        </a>
                        <ul class="current-city-list  header-select" id="current-city"
                            style="display: none; height: 174px; padding-top: 12px; margin-top: 0px; padding-bottom: 12px; margin-bottom: 0px;">
                            <li><a href="javascript:void(0);" class="city-id-1"
                                    data-json="{&quot;id&quot;:&quot;1&quot;,&quot;name&quot;:&quot;\u4e0a\u6d77&quot;,&quot;region_id&quot;:&quot;22&quot;}"
                                    style="display: none;">上海</a></li>
                            <li><a href="javascript:void(0);" class="city-id-2"
                                    data-json="{&quot;id&quot;:&quot;2&quot;,&quot;name&quot;:&quot;\u5317\u4eac&quot;,&quot;region_id&quot;:&quot;2&quot;}">北京</a>
                            </li>
                            <li><a href="javascript:void(0);" class="city-id-3"
                                    data-json="{&quot;id&quot;:&quot;3&quot;,&quot;name&quot;:&quot;\u5929\u6d25&quot;,&quot;region_id&quot;:&quot;43&quot;}">天津</a>
                            </li>
                            <li><a href="javascript:void(0);" class="city-id-4"
                                    data-json="{&quot;id&quot;:&quot;4&quot;,&quot;name&quot;:&quot;\u676d\u5dde&quot;,&quot;region_id&quot;:&quot;3134&quot;}">杭州</a>
                            </li>
                            <li><a href="javascript:void(0);" class="city-id-5"
                                    data-json="{&quot;id&quot;:&quot;5&quot;,&quot;name&quot;:&quot;\u65e0\u9521&quot;,&quot;region_id&quot;:&quot;1717&quot;}">无锡</a>
                            </li>
                            <li><a href="javascript:void(0);" class="city-id-6"
                                    data-json="{&quot;id&quot;:&quot;6&quot;,&quot;name&quot;:&quot;\u82cf\u5dde&quot;,&quot;region_id&quot;:&quot;1692&quot;}">苏州</a>
                            </li>
                            <li><a href="javascript:void(0);" class="city-id-7"
                                    data-json="{&quot;id&quot;:&quot;7&quot;,&quot;name&quot;:&quot;\u5e7f\u5dde&quot;,&quot;region_id&quot;:&quot;424&quot;}">广州</a>
                            </li>
                            <li><a href="javascript:void(0);" class="city-id-8"
                                    data-json="{&quot;id&quot;:&quot;8&quot;,&quot;name&quot;:&quot;\u6df1\u5733&quot;,&quot;region_id&quot;:&quot;524&quot;}">深圳</a>
                            </li>
                        </ul>
                        <ul class="header-user-list  header-select" id="header-user" style="">
                            <li><a href="//static.21cake.com//member/orders.html" target="_blank">我的订单</a></li>
                            <li><a href="//static.21cake.com//user-coupon_index.do?back_url=L2NvdXBvbi5odG1s"
                                    target="_blank">我的优惠券</a></li>
                            <li><a href="//static.21cake.com//member/date.html" target="_blank">我的纪念日</a></li>
                            <li><a class="quit" target="_self">退出登录</a></li>
                        </ul>
                        <ul class="message-list-header  header-select" id="messageList"
                            style="display: none; height: 54px; padding-top: 12px; margin-top: 0px; padding-bottom: 12px; margin-bottom: 0px;">
                            <li><a href="//static.21cake.com//message/center.html" target="_blank">通知</a></li>
                            <li><a href="//static.21cake.com//message/center.html?#delivery" target="_blank">物流</a></li>
                        </ul>
                        <dl class="app-list  header-select" id="app-list"
                            style="display: none; height: 115px; padding-top: 10px; margin-top: 0px; padding-bottom: 10px; margin-bottom: 0px;">
                            <dt>
                                <img src="../imgs/21cake-develop/footer-erweima.png" alt="下载APP">
                                <!-- <img src="/themes/site/img/app.jpg" alt=""> -->
                            </dt>
                            <dd>下载享更多优惠</dd>
                        </dl>
                    </div>
                </div>
            </div>
    </div>
    <!-- 中间部分 -->
    <div class="login-background" style="height: 667px;">
            <!-- 中间内容 -->
            <div class="content-box" >
                <div class="form-login-box" style="right: 0px;">
                    <div class="login-regi-title">
                        <h2 class="regi-user active">用户注册</h2>
                    </div>
                    <!-- <script type="text/javascript"> var VERIFY_CODE_SALT = '50643940446ba3f7';</script> -->
                    <form id="sign-up-form">
                        <!-- <input type="hidden" name="RQrB683B56xHVLmKQVMMNg" value="HnlFAg2EZQFgy85ZisWKOg">
                        <input type="hidden" name="redirectUrl" value="Lw=="> -->
                        
                        <div class="form-content" id="reister-user">
                            <ul class="reister-user">
                                <li>
                                    <input type="text" class="loginName"  autofocus="autofocus" maxlength="11" placeholder="输入手机号码" id="telephone" tabindex="1"><i></i>
                                </li>
                                <li>
                                    <input type="password" autocomplete="" class="password"  maxlength="20" placeholder="密码：请输入8～20字符，需同时包含英文和数字" id="password" tabindex="2"><i></i>
                                </li>
                                <li>
                                    <input type="password" autocomplete="" class="rePassword"  maxlength="20" placeholder="确认密码" id="rePassword" tabindex="3"><i></i>
                                </li>
                                <li class="login-img-text message-text" style="display: block">
                                    <input type="text" placeholder="请输入图片字符" class="code" id="regiImgText" tabindex="4"><i></i>
                                    <img src="../../pages/imgs/21cake-develop/passport-verify.png" data-src="/" class="regImg">
                                    <a href="#" class="refresh-button"></a>
                                </li>
                                <!-- 输入短信验证码 -->
                                <li class="login-mes-unm">
                                    <input type="text" class="authCode" placeholder="短信验证码" id="authCode" tabindex="5"><i></i>
                                    <a id="regiGetCode" class="regiGetCode" style="font-size: 12px">获取验证码</a>
                                 </li>
                                <li>
                                    <input id="birthday" type="text" class="birthday" data-toggle="date" placeholder="请输入您的生日，格式如2012-02-01" data-required="0" class="hasDatepicker">
                                </li>
                                
                                <li class="err-text">
                                <span></span>
                                <i></i>
                                </li>
                                <li>
                                    <input type="submit" class="login-button" value="注册" id="goRegister">
                                </li>
                                </ul>
                        </div>
    
                        <div class="reading-protocol">
                            <label><input type="checkbox" class="agree" checked="">&nbsp;已阅读并同意</label>
                            <a href="//static.21cake.com//article-agreement-36.html">21客会员协议</a>和
                            <a href="//static.21cake.com//article-policy-35.html">隐私保护政策</a>
                        </div>
                    </form>
                </div>
            </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
            <img src="../imgs/21cake-develop/footer-logo.png" alt="" class="footer-logo">
            <div class="footer-nav">
                <a href="//static.21cake.com//doc-about-55.html">联系我们</a>
                <span>|</span>
                <a href="//static.21cake.com//doc-distribution-40.html">订购帮助</a>
                <span>|</span>
                <a href="//static.21cake.com//doc-about-56.html">企业合作</a>
                <span>|</span>
                <a href="//static.21cake.com//doc-about-115.html">生产经营资质</a>
                <span>|</span>
                <a href="//static.21cake.com//article-company.html">公告专区</a>
            </div>
    
            <div class="footer-icon">
                <a href="http://weibo.com/21cake" target="_blank">
                    <img src="../imgs/21cake-develop/footericon-01.png">
                </a>
                <a class="footer-weixin">
                    <div class="footer-erweima footer-weixin-erweima" style="display: none;">
                        <img src="../imgs/21cake-develop/erweima.png" style="top: 0px;">
                    </div>
                    <img src="../imgs/21cake-develop/footericon-02.png">
                </a>
                <a class="footer-app">
                    <div class="footer-erweima footer-app-erweima" style="display: none;">
                        <img src="../imgs/21cake-develop/footer-erweima.png" style="top: 0px;">
                    </div>
                    <!-- <img src="//static.21cake.com/themes/site/img/footericon-03.png"> -->  
                    APP
                </a>
            </div>
    
            <div class="footer-text">
                <span>订购专线：400 650 2121（服务时间 08:00–22:00），企业团购热线：021-37768396</span>
                <span>客服电话：021-23099721（全国），kefu@21cake.com（邮箱）</span>
                <span>杭州/广州：提前5小时预订；北京：提前6小时预订；上海：提前5.5-6小时预订；天津/苏州/无锡/深圳：提前8小时预订（部分偏远地区除外，当日22点以后订单，于次日8点开始审核） </span>
                <span>当日蛋糕配送截止下单时间：北京：16:50；上海：16:30；杭州/广州：13:50；天津：10:30；苏州/无锡/深圳：11:00</span>
                <span>网站注册公司名称: 北京廿一客食品有限公司 地址: 北京市北京经济技术开发区兴海二街5号院3号楼 </span>
            </div>
    
            <div class="footer-copyright">
                <span>Copyright© 21Cake蛋糕官网商城 2007-2018, 版权所有 <a style="color: #9a9a9a" target="_blank" href="http://www.miitbeian.gov.cn/">京ICP备14006254号-1</a></span>
            </div>
    </div>
</body>
<script src="../../static/script/require.js" data-main="register.js" type="text/javascript" charset="utf-8"></script>
<!-- <script>
    require(["../../static/conf/config.js"], function () {
    require(["jquery"], function ($) {
        let telReg = /^[1][3,4,5,6,7,8][0-9]{9}$/;
        let passwordReg = /^[A-Za-z0-9]{8,20}$/;
        let randomCode = null;
        let status1=null;
        let status2=null;
        let status3=null;
        let status4=null;
        let status5=null;
        let status6=null;
        let telValue=null;
        let passwordValue=null;
        // $(".loginName").focus(function(){
        //     $(".reister-user").children().css({
        //         borderColor : "#dadada" 
        //     })
        // })
    //手机号码验证
    $(".loginName").blur(function(){
        telValue = $(".loginName").val().replace(/(^\s*)|(\s*$)/g,'');
        if(telValue==""){
            $(".err-text").children("i").css({
                display : "block"
            })
            $(".err-text").children("span").text("请输入正确的手机号码")
            $(".loginName").siblings("i").css({
                display : "none"
            })
            status1 = false;
        }
        else if(!telReg.test(telValue)){
            $(".err-text").children("i").css({
                display : "block"
            })
            $(".err-text").children("span").text("请输入正确的手机号码")
            $(".loginName").siblings("i").css({
                display : "none"
            })
            status1 = false;
            
        }
        else {
            $(".loginName").siblings("i").css({
                display : "block"
            })
            $(".err-text").children("i").css({
                display : "none"
            })
            $(".err-text").children("span").text("")
            status1 = true;
        }
    })
    //密码验证
    $(".password").blur(function(){
        passwordValue=$(".password").val().replace(/(^\s*)|(\s*$)/g, '');
        let strength = 0;
        if(passwordValue==""){
            $(".err-text").children("i").css({
                display  : "block"
            })
            $(".err-text").children("span").text("密码由8～20个字符，需同时包含英文和数字")
            $(".password").siblings("i").css({
                display : "none"
            }).addClass("weak")
            status2 = false;
            }
        else if(!passwordReg.test(passwordValue)){
            $(".err-text").children("i").css({
                display : "block"
            })
            $(".err-text").children("span").text("密码由8～20个字符，需同时包含英文和数字")
            $(".password").siblings("i").css({
                display : "none"
            }).addClass("weak")
            status2 = false;
            
        }
        else{
            if(/^[A-Za-z0-9]{1,7}/g.test(passwordValue)){
                strength = 1;
            }
            if(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/g.test(passwordValue)){
                strength = 2;
            }
            if(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{17,20}$/g.test(passwordValue)){
                strength = 3;
            }
        
            if(strength == 1){
                $(".err-text").children("i").css({
                display : "block"
                })
                $(".err-text").children("span").text("密码由8～20个字符，需同时包含英文和数字")
                $(".password").siblings("i").css({
                    display :　"block"
                }).removeClass("moderate").addClass("weak").removeClass("strong")  
                status2 = false;    
            }
            if(strength == 2){
                $(".err-text").children("i").css({
                display : "none"
                })
                $(".err-text").children("span").text("")
                $(".password").siblings("i").css({
                    display :　"block"
                }).addClass("moderate").removeClass("weak").removeClass("strong")
                status2 = true;
            }
            if(strength == 3){
                $(".err-text").children("i").css({
                display : "none"
                })
                $(".err-text").children("span").text("")
                $(".password").siblings("i").css({
                    display :　"block"
                }).removeClass("moderate").addClass("strong").removeClass("weak")
                status2 = true;
            }

        }

    })
    
    //确认密码
    $(".rePassword").blur(function(){
        var rePasswordValue = $(".rePassword").val().replace(/(^\s*)|(\s*$)/g, '');
        if(rePasswordValue == "" || rePasswordValue == undefined ){
            $(".err-text").children("i").css({
                display : "block"
            })
            $(".err-text").children("span").text("两次密码输入不一致")
            $(".rePassword").siblings("i").css({
                display : "none"
            })
                status3 = false;
        }
        if(rePasswordValue !== $(".password").val()){
            $(".err-text").children("i").css({
                display : "block"
            })
            $(".err-text").children("span").text("两次密码输入不一致")
            $(".rePassword").siblings("i").css({
                display : "none"
            })
                status3 = false;
        }
        if(rePasswordValue == $(".password").val() && rePasswordValue !== ""){
            $(".err-text").children("i").css({
                display : "none"
            })
            $(".err-text").children("span").text("")
            $(".rePassword").siblings("i").css({
                display : "block"
            })
                status3 = true;
        }
    })
    
    //图片验证码验证
    $(".code").blur(function(){
        let codeValue = $(".code").val().replace(/(^\s*)|(\s*$)/g,'')
        if(codeValue !== "bpn7"){
            $(".err-text").children("i").css({
                display : "block"
            })
            $(".err-text").children("span").text("图形验证码错误")
            $(".code").siblings("i").css({
                display : "none"
            })
            status4 = false;
        } 
        if(codeValue == ""){
            $(".err-text").children("i").css({
                display : "block"
            })
            $(".err-text").children("span").text("请输入图形验证码")
            $(".code").siblings("i").css({
                display : "none"
            })
            status4 = false;
        }
        if(codeValue == "bpn7"){
            $(".err-text").children("i").css({
                display : "none"
            })
            $(".err-text").children("span").text("")
            $(".code").siblings("i").css({
                display : "block"
            })
            status4 = true;
        }
    })

    //短信验证码
    $(".regiGetCode").click(function(){
        let random1 = parseInt(Math.random()*10);
        let random2 = parseInt(Math.random()*10);
        let random3 = parseInt(Math.random()*10);
        let random4 = parseInt(Math.random()*10);
        let random5 = parseInt(Math.random()*10);
        let random6 = parseInt(Math.random()*10);
        randomCode = parseInt(`${random1}${random2}${random3}${random4}${random5}${random6}`)
        $(this).text(randomCode)
    })
    $(".authCode").blur(function(){
        let telCodeValue = $(".authCode").val().replace(/(^\s*)|(\s*)$/g,'')
        if(telCodeValue !== randomCode){
            $(".err-text").children("i").css({
                display : "block"
            })
            $(".err-text").children("span").text("短信验证码错误")
            $(".authCode").siblings("i").css({
                display : "none"
            })
            status5 = false;
        }
        if(telCodeValue == randomCode){
            $(".err-text").children("i").css({
                display : "none"
            })
            $(".err-text").children("span").text("")
            $(".authCode").siblings("i").css({
                display : "block"
            })
            status5 = true;
        }
    })

    //生日接收（存储到后台用户信息当中）

    //勾选会员协议和隐私保护政策
    $(".login-button").click(function(){
        if($(".agree").is(":checked")){
            status6 = true;
            alert("sss")
        }
        else{
            $(".err-text").children("i").css({
                display : "block"
            })
            $(".err-text").children("span").text("请勾选21客会员协议和隐私保护政策")
            status6 = false;
        }
        //设置本地存储
        let jsonDate = JSON.parse(localStorage.getItem('userinfo'));
            let arr = [];
        for(let i in jsonDate){
            arr.push(jsonDate[i]);
        }
        if(status1==true && status2==true && status3==true && status4==true && status5==true && status6==true){
            arr.push({
                username : telValue,
                password :　passwordValue
            })
            localStorage.setItem('userinfo',JSON.stringify(arr));
            setTimeout(function(){
                window.location = "../login/login.html"
            })

        }

    })


    })
})
</script> -->
</html>